
<template>
  <div>
    <div>首页</div>
    <div>
      <div>
        <template v-for="(item,index) in specifications">
         <div :key="index">
           <span>{{item.name}}</span>
           <!--  -->
           <button v-for="(sub,i) in item.list" :key="i" @click="handleSelect(item.name,sub)"
           :disabled="not_allowed_buttons.includes(`${item.name}-${sub}`)" :class="now_select[item.name]==sub?'active':''">{{sub}}</button>
         </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        skus:[
          {'skuno':'9527','attr':{'颜色':'黑色','版本':'标准版','内存':'128G'},'stock':'12','price':'79'},
          {'skuno':'8527','attr':{'颜色':'黑色','版本':'NFC版','内存':'128G'},'stock':'99','price':'91'},
          {'skuno':'8527','attr':{'颜色':'黑色','版本':'NFC版','内存':'256G'},'stock':'99','price':'91'},
          {'skuno':'7527','attr':{'颜色':'红色','版本':'标准版','内存':'128G'},'stock':'11','price':'8'},
          {'skuno':'6527','attr':{'颜色':'红色','版本':'NFC版','内存':'128G'},'stock':'12','price':'80'},
          {'skuno':'6527','attr':{'颜色':'红色','版本':'NFC版','内存':'256G'},'stock':'12','price':'80'},
          {'skuno':'7527','attr':{'颜色':'蓝色','版本':'标准版','内存':'128G'},'stock':'11','price':'8'},
          {'skuno':'6527','attr':{'颜色':'蓝色','版本':'NFC版','内存':'128G'},'stock':'12','price':'80'},
          {'skuno':'6527','attr':{'颜色':'蓝色','版本':'NFC版','内存':'256G'},'stock':'12','price':'80'},
        ],
        // skus:[
        //   {'skuno':'UU050787','attr':{'颜色':'黑色','大小':'XL','款式':'短款','品牌':'阿迪'},'stock':'12','price':'79'},
        //   {'skuno':'LL250786','attr':{'颜色':'黑色','大小':'S','款式':'长款','品牌':'耐克'},'stock':'12','price':'79'},
        //   {'skuno':'HH150789','attr':{'颜色':'红色','大小':'L','款式':'短款','品牌':'阿迪'},'stock':'12','price':'79'},
        //   {'skuno':'DD350788','attr':{'颜色':'蓝色','大小':'XL','款式':'短款','品牌':'阿迪'},'stock':'12','price':'79'},
        // ],
        specifications:[
          {
            name:'颜色',
            list:['黑色','红色','蓝色','紫色']
          },
          {
            name:'版本',
            list:['标准版','NFC版']
          },
          {
            name:'内存',
            list:['128G','256G']
          }
          // {
          //   name:'颜色',
          //   list:['黑色','红色','蓝色']
          // },
          // {
          //   name:'款式',
          //   list:['短款','长款']
          // },
          // {
          //   name:'品牌',
          //   list:['阿迪','耐克']
          // },
          // {
          //   name:'大小',
          //   list:['S','L','XL','XXL']
          // }
        ],
        // matched_skus:[] , // 匹配的数组
        // allowed_attr:[], //所有属性
        not_allowed_buttons:[],//不允许点击
        now_select:{}, //当前选中的属性
        // selected_buttons:[], //已选择的按钮
        not_selected_buttons:[], //未选择的按钮
        is_all_select:false,
        can_use_buttons:[],
        matched_skus_array:[],
        almost_matched_skus_array:[],
        sku_result:[]
      }
    },
    created () {
      // this.caculate_allowed_attr(this.specifications)
      this.caculate_button(this.skus,this.specifications,this.now_select)
    },
    methods: {
      handleSelect(name,value){
        if(this.now_select[name]===value){
            // console.log('value相等删除')
          delete this.now_select[name]
        }else if(this.now_select[name]!==value){
            // console.log('value不相等替换')
            this.now_select[name]=value
        }else if(!this.now_select[name]) {
          // console.log('对象中没有就添加')
          this.now_select[name]=value
        }
        // console.log('点击事件',this.now_select)
        this.caculate_button(this.skus,this.specifications,this.now_select)
      },

      // caculate_allowed_attr(attr_array){
      //    attr_array.forEach(item=>{
      //       item.list.forEach(val=>{
      //         this.allowed_attr.push(item.name+'-'+val)
      //       })
      //     })
      // },

      caculate_button(skus,attr_array,now_select){
        this.is_all_select=this.isComplete()
        this.selected_or_not_buttons(attr_array,now_select)
        if(this.is_all_select){
          console.log('----------所有属性选择完成----------')
          this.almost_matched_skus(skus,now_select);
          this.get_can_use_buttons(this.almost_matched_skus_array);
          this.matched_skus_FN(skus,now_select);
        
        }else{
          console.log('----------属性没有选择完成----------')
          this.not_selected_buttons=[...this.not_allowed_buttons,...this.not_selected_buttons]
          this.matched_skus_FN(skus,now_select);
          this.get_can_use_buttons(this.matched_skus_array);
          
        }
        this.not_allowed_buttons=this.array_diff(this.not_selected_buttons,this.can_use_buttons)
          // console.log('可选按钮',this.can_use_buttons);
          // console.log('不可选按钮',this.not_allowed_buttons);
      },

      matched_skus_FN(skus,now_select){
       let keys=Object.keys(now_select)
       let result= skus.filter(item=>{
          return keys.every(key => now_select[key].indexOf(item.attr[key]) > -1)
        })
      if(this.is_all_select){
        this.sku_result=result
        console.log('最终结果',this.sku_result)
      }else{
        this.matched_skus_array=result
      }
       
      },
      almost_matched_skus(skus,now_select){
        let result = [];
        skus.forEach(item=>{
            let not_match_number = 0;
            for(var key in now_select){
                if(item.attr[key] != now_select[key]){
                    not_match_number = not_match_number+1;
                }
            }
            if(not_match_number==1 && item.stock>0){
                result.push(item);
            }
        });
       this.almost_matched_skus_array=result
      },
      get_can_use_buttons(skus){
        let can_use_buttons=[]
        skus.forEach(item => {
          for(var key in item.attr){
                can_use_buttons.push(key+'-'+item.attr[key]);
            }
        });
        this.can_use_buttons=[...new Set(can_use_buttons)]
      },
      
      

      selected_or_not_buttons(attr_array,now_select){
        console.log('选中的按钮：', now_select);
        let all=[]
        let selected_buttons = []
        if(this.is_all_select){
           attr_array.forEach(item=>{
            item.list.forEach(el=>{
              all.push(item.name+'-'+el)
            })
          })
        }else{
        
          attr_array.forEach(item=>{
            if(!now_select[item.name]){
              item.list.forEach(el=>{
                all.push(item.name+'-'+el)
              })
            }
            
          })
        }
      
        for (var key in now_select) {
           selected_buttons.push(key + '-' + now_select[key]);
        }
        

        console.log('all', all);
        console.log('已选按钮',selected_buttons);
        this.not_selected_buttons = this.array_diff(all,selected_buttons);
        console.log('未选按钮',this.not_selected_buttons);
      },
      isComplete(){
        let now_select_len=Object.keys(this.now_select).length
        let attr_len= this.specifications.map(item=>item.name).length
        if(now_select_len===attr_len){
          return true
        }else{
         return false
        }
      },
      array_diff(aArr,bArr){ 
        //求差集
    // 　　if(bArr.length==0){return aArr}
    // 　　var diff=[];
    // 　　var str=bArr.join("&quot;&quot;");
    // 　　for(var e in aArr){
    // 　　if(str.indexOf(aArr[e])==-1){
    // 　　　　diff.push(aArr[e]);
    // 　　　　}
    // 　　}
    // 　　return diff;
       let result= aArr.filter(val=> bArr.indexOf(val) === -1 )
       return result
      }
    }
    
  }
</script>

<style  scoped>
.active{
  background-color: red;
}
</style>
